<script lang="ts" setup>
// 接收页面参数
import {onLoad, onPullDownRefresh} from "@dcloudio/uni-app";
import {addFavApi, getAnimalDetailByIdApi, ratingApi} from "@/api/detail";
import {ref} from "vue";
import type {AnimalDetailResult} from "@/types/animals";
import {useBrowsingHistoryStore} from "@/stores/browsingHistory";
import type {UserBrowseHistory} from "@/types/user";
import {useUserStore} from "@/stores/user";
import type {GuessAnimalItem} from "@/types/home";
import {getGuessLikeListApi} from "@/api/home";
import type {ImgError} from "@/types/error";
import {ImgErrorType} from "@/enum/imgErrorType";
import Skeleton from "@/subPkg/detail/components/Skeleton.vue";
import Comment from "@/subPkg/detail/components/Comment.vue"
import {IMessage} from "@/components/aw-message/message";
import type {MosoweCanvasListItem} from "@/components/mosowe-canvas-image/typing";
import type {CommentItem} from "@/types/comment";

onPullDownRefresh(() => {
  getAnimalDetail()
  uni.stopPullDownRefresh()
})
const {safeAreaInsets, windowWidth, windowHeight} = uni.getSystemInfoSync()
/**
 * 页面参数 动物id
 */
const pageQuery = defineProps<{
  id: string
}>()
const animalId = ref(Number(pageQuery.id))
const browsingHistoryStore = useBrowsingHistoryStore()
const userStore = useUserStore()
const goBack = () => {
  uni.navigateBack()
}
/**
 *  获取动物详情
 */
const animalDetail = ref<AnimalDetailResult>()
const score = ref(1)
const isFinish = ref(false)
const isFinishImg = ref(false) //是否完成动物头像图加载
// 评论组件
const comment = ref()

const getAnimalDetail = async () => {
  const res = await getAnimalDetailByIdApi(pageQuery.id, userStore.userInfoData?.userID)
  if (res.code !== '1') {
    return uni.showToast({title: res.message, icon: 'none'})
  }
  if (res.data.animalList[0].imgList?.length < 1) {
    res.data.animalList[0].imgList = [{
      uid: res.data.animalList[0].imgURL,
      url: res.data.animalList[0].imgURL
    }]
  }
  animalDetail.value = res.data
  score.value = Number((Number(animalDetail.value?.animalList[0].score) / 20).toFixed(1))
  isFinish.value = true
  const history: UserBrowseHistory = {
    id: pageQuery.id,
    userID: userStore?.userInfoData ? userStore.userInfoData.userID : -1,
    animalsId: pageQuery.id,
    imgURL: res.data.animalList[0].imgURL,//封面
    name: res.data.animalList[0].name,
    desc: res.data.animalList[0].description, // 简述
    time: new Date().getTime() //时间
  }
  // 添加相关数据到历史浏览
  browsingHistoryStore.addBrowsingHistory(history)
  poster.value = ([
    // 分享头部区域
    {
      //背景
      type: "shape",
      x: 0,
      y: 0,
      width: 310,
      height: 400,
      color: "#fff",
    },
    {
      type: "text",
      content: "萌创cute",
      color: '#39c5bb',
      x: 20,
      y: 40,
      font: 'bold 20px sans-serif',
    },
    {
      type: 'text',
      content: '更多趣事等你来发现',
      x: 110,
      y: 40,
      color: '#ccc',
      font: 'normal 13px sans-serif'
    },
    {
      type: 'image',
      content: animalDetail.value?.animalList[0].imgURL,
      x: 30,
      y: 60,
      width: 250,
      height: 150,
      arcR: 10,
      imageShapeType: 'width',
    },
    {
      type: 'text',
      content: animalDetail.value?.animalList[0].name,
      x: 35,
      y: 240,
      color: '#333',
      font: 'bold 16px sans-serif'
    },
    {
      type: 'text',
      content: score.value == 0 ? '暂无评分' : score.value + '分',
      x: 35 + animalDetail.value!.animalList[0].name.length * 16 + 10,
      y: 240,
      color: '#3ebed3',
      font: 'normal 14px sans-serif'
    },
    {
      type: 'text',
      content: animalDetail.value?.animalList[0].description ? animalDetail.value?.animalList[0].description.length > 45
              ? animalDetail.value!.animalList[0].description.substring(0, 45) + '...' : animalDetail.value!.animalList[0].description
          : '暂无该动物相关描述',
      x: 35,
      y: 265,
      color: '#333',
      font: 'normal 14px sans-serif',
      maxWidth: 250
    },
    //底部灰色矩形
    {
      type: 'shape',
      x: 0,
      y: 300,
      width: 310,
      height: 100,
      color: '#F4F4F4',
    },
    // 底部二维码
    {
      type: 'qr',
      content: 'http://cuteworld.top/apk/mcctue.apk',
      width: 50,
      height: 50,
      x: 240,
      y: 330,
    }, {
      type: 'image',
      content: appImg,
      x: 257.5,
      y: 347.5,
      width: 15,
      height: 15,
      color: '#999',
      arcR: 2,
      font: 'normal 12px sans-serif'
    }
    //底部分享人头像和昵称
    , {
      type: 'image',
      content: shareUserAvatar,
      x: 10,
      y: 310,
      width: 40,
      height: 40,
      arcR: 20,
      arcX: 0,
      arcY: 0,
      imageShapeType: 'width',
    },
    {
      type: 'text',
      content: shareName,
      x: 55,
      y: 320,
      color: '#333',
      font: 'bold 12px sans-serif'
    },
    {
      type: 'text',
      content: '分享于 ' + time,
      x: 55,
      y: 335,
      color: '#999',
      font: 'normal 10px sans-serif'
    }
    // 底部二维码文字描述
    , {
      type: 'text',
      content: '保存图片',
      x: 195,
      y: 345,
      color: '#999',
      font: 'normal 10px sans-serif'
    },
    {
      type: 'text',
      content: '打开系统自带浏览器',
      x: 145,
      y: 360,
      color: '#999',
      font: 'normal 10px sans-serif'
    },
    {
      type: 'text',
      content: '扫描二维码下载app',
      x: 148,
      y: 375,
      color: '#999',
      font: 'normal 10px sans-serif'
    }
  ])
}


// 点击收藏
const onClickFav = async () => {
  if (!userStore.userInfoData) {
    const platform = uni.getSystemInfoSync().uniPlatform
    if (platform === 'app' || platform === 'web') {
      return IMessage({
        content: '请先登录',
        type: 'error',
        showIcon: true,
      })
    } else {
      return uni.showToast({title: '请先登录', icon: 'none'})
    }
  }
  const status = animalDetail.value?.animalList[0].collected === 0 ? 1 : 0
  // 发送添加收藏请求
  const res = await addFavApi(Number(animalDetail.value?.animalList[0].animalID!), status)
  if (res.code !== '1') {
    return uni.showToast({title: res.message, icon: 'none'})
  }
  animalDetail.value!.animalList[0].collected = status
  uni.showToast({title: animalDetail.value!.animalList[0].collected === 1 ? '收藏成功' : '已取消收藏'})
}

// 猜你喜欢
// 获取猜你喜欢
const guessLikeList = ref<GuessAnimalItem[]>()
const getGuessLikeList = async () => {
  const res = await getGuessLikeListApi(1, 20);
  if (guessLikeList.value) {
    //  加载更多拼接数据
    guessLikeList.value = [...guessLikeList.value, ...res.data.data]
    return
  }
  guessLikeList.value = res.data.data
}

/*图片异常处理*/
const onImgError = (error: ImgError) => {
  switch (error.type) {
    case ImgErrorType.LIST_IMG_ERROR:
      guessLikeList.value![error.index].img = ImgErrorType.ERROR_IMG_URL;
      break;
    default:
      break;
  }
}

onLoad(() => {
  getAnimalDetail()
  getGuessLikeList()
})

// 滑动区域
const activeIndex = ref<0 | 1>(0)
const swiperHeight = ref(windowHeight * 750 / windowWidth - 660)
// #ifdef H5
swiperHeight.value = windowHeight * 750 / windowWidth - 660 + 10
// #endif
const underLineLeft = ref(12)
const underLineWidth = ref(2.7)
const isLoadComment = ref(false)
const onChange = () => {
  if (activeIndex.value === 0) {
    activeIndex.value = 1
    underLineLeft.value = 30
  } else {
    activeIndex.value = 0
    underLineLeft.value = 12
  }
}
const onMoveSwiper: UniHelper.SwiperOnTransition = (event) => {
  // underLineWidth.value = 3
}
const page = ref(1)
const onSwiperChange: UniHelper.SwiperOnChange = (event) => {
  activeIndex.value = event.detail.current as 0 | 1
  if (activeIndex.value === 0) {
    underLineLeft.value = 12
    underLineWidth.value = 2.7
  } else {
    // #ifdef H5
    isDown.value = true
    // #endif

    underLineLeft.value = 30
    underLineWidth.value = animalDetail.value!.animalList[0].commentCount! > 10 ? 4.4 : 4
  }
  if (!isLoadComment.value) {
    isLoadComment.value = true
    comment.value.getComment({page: page.value, pageSize: 10, animalId: pageQuery.id})
  }
}

const loadMoreComment = () => {
  page.value++
  comment.value.getComment({page: page.value, pageSize: 10, animalId: pageQuery.id, loadMore: true})
}
const updateComment = () => {
  getAnimalDetail()
}
const showLevel = (level: string) => {
  switch (level) {
    case '1':
      return '一级保护动物'
    case '2':
      return '二级保护动物'
    case '3':
      return '三级保护动物'
    case '4':
      return '可爱的动物'
  }
}
const showBreed = (breed: string) => {
  switch (breed) {
    case '1':
      return '胎生'
    case '2':
      return '卵生'
    case '3':
      return '无性'
  }
}

//评分
const ratingPopup = ref()
const rateValue = ref(0)
const handleRating = () => {
  ratingPopup.value.open()
}
const closeRating = () => {
  ratingPopup.value.close()
}
// 确认评分
const showRateCount = ref(0)
const confirmRating = async () => {
  ratingPopup.value.close()
  if (rateValue.value === 0) {
    return
  }
  const res = await ratingApi(Number(pageQuery.id), rateValue.value * 20)
  score.value = Number((res.data.newScore / 20).toFixed(1))
  showRateCount.value = res.data.newRateCount
  if (res.data.first) {
    return IMessage({
      content: '评分成功',
      type: 'success',
      showIcon: true
    })
  }

  IMessage({
    content: '评分修改成功',
    type: 'success',
    showIcon: true
  })
}
const onRatingChange: UniHelper.UniRateOnChange = (event) => {
}
const goLogin = () => {
  uni.navigateTo({
    url: '/subPkg/login/login'
  })
}

const mask = ref(false)

// 图片分享
const imageRef = ref()
const commentRef = ref()
const imageData = ref('')
const now = new Date();
const time = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate() + ' ' + now.getHours() + ':' + (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes())
const appImg = '/static/app-cover.jpg'
const poster = ref<MosoweCanvasListItem[]>()
const commentPoster = ref<MosoweCanvasListItem[]>() // 用户分享评论（不需要包含分享人信息，评论信息为主）
const shareUserAvatar = userStore.userInfoData?.avatarURL || '/static/kun.png'
const shareName = userStore.userInfoData?.username
// 创建图片
const _createImage = () => {
  if (!userStore.userInfoData?.userID) {
    popupToLogin.value.open()
    return IMessage({
      showIcon: true,
      content: '请先登录',
      type: 'warning'
    })
  }
  const platform = uni.getSystemInfoSync().uniPlatform
  if (platform === 'web') {
    //复制
    uni.setClipboardData({
      data: '萌创社——' + animalDetail.value?.animalList[0].name + '详情点击' + 'http://cuteworld.top/#/subPkg/detail/detail?id=' + pageQuery.id,
      success: () => {
        uni.showToast({title: '已复制链接', icon: 'none', duration: 500})
        setTimeout(() => {
          IMessage({
            content: '更多分享功能，推荐使用App分享',
            duration: 4400
          })
        }, 1000)
      },
      fail: () => {
        uni.showToast({title: '分享失败', icon: 'none'})
      }
    })
  }
  if (platform === 'app') {
    try {
      setTimeout(() => {
        imageRef.value.createCanvas()
      }, 200)
    } catch (e) {
      uni.hideLoading()
      console.log(e)
    }
  }
}

// 创建分享评论图片
const _createImageComment = () => {
  const platform = uni.getSystemInfoSync().uniPlatform
  if (platform === 'app') {
    try {
      setTimeout(() => {
        commentRef.value.createCanvas()
      }, 200)
    } catch (e) {
      uni.hideLoading()
      console.log(e)
    }
  }
}
// 获取图片
const _canvasImage = (image: string) => {
  imageData.value = image
  showMask.value = true
}
const showMask = ref(false)
const downloadPic = () => {
  uni.saveImageToPhotosAlbum({
    filePath: imageData.value,
    success: (res) => {
      uni.showToast({title: '已保存到本地相册', icon: 'none'})
    },
    fail: (err) => {
      console.log(err)
      uni.showToast({title: '保存失败', icon: 'none'})
    }
  })
}

// #ifdef APP-PLUS
const onShare = () => {
  plus.share.sendWithSystem({
    type: 'image',
    pictures: [imageData.value],
  }, function () {
    // 调用系统消息提示
  }, function (err) {
  })
}
// #endif

const goOrigin = () => {
  uni.navigateTo({
    url: '/subPkg/web/web?url=' + 'https://baike.baidu.com/item/' + animalDetail.value?.animalList[0].name + '&&title=' + animalDetail.value?.animalList[0].name
  })
}

// 评论分享事件
const handleShare = (comment: CommentItem) => {
  // 修改绘图参数
  commentPoster.value = ([
    // 分享头部区域
    {
      //背景
      type: "shape",
      x: 0,
      y: 0,
      width: 310,
      height: 400,
      color: "#fff",
    },
    //顶部分享人头像和昵称
    {
      type: 'image',
      content: comment.userAvatar,
      x: 10,
      y: 30,
      width: 40,
      height: 40,
      arcR: 20,
      arcX: 0,
      arcY: 0,
      imageShapeType: 'width',
    },
    {
      type: 'text',
      content: comment.userName,
      x: 55,
      y: 40,
      color: '#333',
      font: 'bold 12px sans-serif'
    },
    {
      type: 'text',
      content: '发布评论于 ' + comment.createTime,
      x: 55,
      y: 55,
      color: '#999',
      font: 'normal 10px sans-serif'
    },
    {
      type: 'text',
      content: comment.content,
      x: 55,
      y: 80,
      color: '#333',
      maxWidth: 210,
      font: 'normal 13px sans-serif'
    },
    //动物部分
    {
      type: "shape",
      x: 8,
      y: 230,
      width: 296,
      height: 105,
      color: "#f3f3f3",
      arcR: 5,
    },
    {
      type: 'image',
      content: animalDetail.value?.animalList[0].imgURL,
      x: 10,
      y: 235,
      width: 100,
      height: 100,
    },
    {
      type: 'text',
      content: animalDetail.value?.animalList[0].name,
      x: 115,
      y: 250,
      color: '#333',
      font: 'bold 16px sans-serif'
    },
    {
      type: 'text',
      content: score.value == 0 ? '暂无评分' : score.value + '分',
      x: 115 + (animalDetail.value!.animalList[0].name.length * 18),
      y: 250,
      color: '#3ebed3',
      font: 'normal 14px sans-serif'
    },
    {
      type: 'text',
      content: animalDetail.value?.animalList[0].description.substring(0, 50),
      x: 115,
      y: 275,
      color: '#999',
      maxWidth: 195,
      font: 'normal 13px sans-serif'
    },
    /*    {
          type: 'text',
          content: animalDetail.value?.animalList[0].description.substring(16, 33),
          x: 115,
          y: 305,
          color: '#999',
          maxWidth: 195,
          font: 'normal 13px sans-serif'
        },
        {
          type: 'text',
          content: animalDetail.value!.animalList[0].description?.length>45?animalDetail.value?.animalList[0].description.substring(33, 45)+'...':animalDetail.value?.animalList[0].description.substring(33, 45),
          x: 115,
          y: 323,
          color: '#999',
          maxWidth: 195,
          font: 'normal 13px sans-serif'
        },*/
    //底部灰色矩形
    // {
    //   type: 'shape',
    //   x: 0,
    //   y: 335,
    //   width: 310,
    //   height: 80,
    //   color: '#F4F4F4',
    //   maxWidth: 300
    // },
    // 底部二维码
    {
      type: 'qr',
      content: 'http://cuteword.top/apk/mcctue.apk',
      width: 50,
      height: 50,
      x: 240,
      y: 345,
    }, {
      type: 'image',
      content: appImg,
      x: 257.5,
      y: 362.5,
      width: 15,
      height: 15,
      color: '#999',
      arcR: 2,
      font: 'normal 12px sans-serif'
    },
    {
      type: "text",
      content: "萌创cute",
      color: '#39c5bb',
      x: 20,
      y: 375,
      font: 'bold 24px sans-serif',
    }
    // 底部二维码文字描述
    , {
      type: 'text',
      content: '保存图片',
      x: 195,
      y: 360,
      color: '#999',
      font: 'normal 10px sans-serif'
    },
    {
      type: 'text',
      content: '打开系统自带浏览器',
      x: 145,
      y: 375,
      color: '#999',
      font: 'normal 10px sans-serif'
    },
    {
      type: 'text',
      content: '扫描二维码下载app',
      x: 148,
      y: 390,
      color: '#999',
      font: 'normal 10px sans-serif'
    }
  ])
  _createImageComment()
}

/**
 *  预览大图
 * @param url 图片链接
 */
const onPreviewImage = (url: string) => {
  uni.previewImage({
    urls: [url],

  })
}
const popupToLogin = ref()
const gotoLogin = () => {
  uni.navigateTo({url: '/subPkg/login/login'})
}

/**
 * 控制nav显示
 */
let startMove: number
let endMove: number
let move: number
const isDown = ref(false)
let distanceToTop = 0

const onScroll = (e: UniHelper.ScrollViewOnScrollEvent) => {
  distanceToTop = e.detail.scrollTop
  isDown.value = distanceToTop >= 200;
}
</script>

<template>
  <view v-if="!isFinish">
    <skeleton></skeleton>
  </view>
  <view v-else>
    <uni-transition :show="!isDown" custom-class="detail-header" mode-class="slide-top">
      <view :class="[mask ? 'mask' : '']"></view>
      <!--    指示条-->
      <view :style="{ '--width': windowWidth + 'px' ,paddingTop: safeAreaInsets?.top+40+'px'}"
            class="hot-category  margin-bottom-lg bg-shadeTop">
        <view :class="{ active: activeIndex === 0 }" class="hot-category-item" @click="onChange">介绍</view>
        <view :class="{ active: activeIndex === 1 }" class="hot-category-item flex align-center" @click="onChange">评论
          <text style="margin-left: 3rpx;">{{
              animalDetail?.animalList[0].commentCount! > 999 ? '999+' : animalDetail?.animalList[0].commentCount
            }}
          </text>
        </view>
        <view id="underLine" ref="line" :style="{ left: underLineLeft + '%', width: `${underLineWidth}rem` }"
              class="under-line round bg-gradual-awGreen"></view>
      </view>
      <text :style="{paddingTop: safeAreaInsets?.top+'px'}" class="shareIcon"
            style="position: fixed;right: 5%; z-index: 999" @tap.prevent="_createImage">
        <uni-icons :size="28" color="#f4f4f4" style="text-shadow:  2px 2px 4px rgba(0, 0, 0, 0.6)"
                   type="redo"></uni-icons>
      </text>
      <!--      轮播图区域-->
      <view class="bg-shadeBottom flex flex-sub align-end padding-bottom-sm justify-start"
            style="height: 83rpx;overflow: hidden;width: 100%;z-index: 9;position: fixed;top: 15vh;">
        <text v-for="tag in animalDetail?.animalList[0].tags?.toString()?.split(',').slice(0, 5)"
              class="text-white text-df margin-lr-sm">{{ tag }}
        </text>
      </view>
      <swiper :autoplay="true" :circular="true"
              style="width: 100%;height: 100%; position: relative">
        <swiper-item class="flex align-end bg-cover"
                     style="width: 100%;height: 100%;">
          <uv-image :src="animalDetail?.animalList[0].imgURL" height="100%" mode="aspectFill" width="100%">
            <template v-slot:loading>
              <view v-if="animalDetail?.animalList[0].imgURL">
                <aw-loader></aw-loader>
              </view>
              <view v-else>
                <uv-image mode="aspectFit" src="/static/home-selected.png"></uv-image>
              </view>
            </template>
            <template v-slot:error>
              <uv-image mode="aspectFit" src="/static/home-selected.png"></uv-image>
            </template>
          </uv-image>
        </swiper-item>
        <swiper-item v-for="(item, index) in animalDetail?.animalList[0].imgList" :key="item.uid"
                     class="flex align-end bg-cover"
                     style="width: 100%;height: 100%;">
          <uv-image :src="item.url" height="100%" mode="aspectFill" width="100%">
            <template v-slot:loading>
              <view v-if="item.url">
                <aw-loader></aw-loader>
              </view>
              <view v-else>
                <uv-image mode="aspectFit" src="/static/home-selected.png"></uv-image>
              </view>
            </template>
            <template v-slot:error>
              <uv-image mode="aspectFit" src="/static/home-selected.png"></uv-image>
            </template>
          </uv-image>
        </swiper-item>
      </swiper>
      <!--      <text class="cuIcon-back line-awGreen"
                  style="position:absolute; top: 50rpx;left: 30rpx;font-size: 50rpx;z-index: 99999" @click="goBack"></text>-->
    </uni-transition>

    <!--    滑动容器-->
    <swiper :class="['detail-swiper',isDown?'hideNav':'showNav']" :current="activeIndex"
            easing-function="easeInOutCubic"
            @change="onSwiperChange" @transition="onMoveSwiper">
      <swiper-item style="width: 100%;margin-top: 20rpx">
        <!--      动物头像图加简介-->

        <view class="animals-box">
          <!--      第一部分面板  -->
          <view class="panel-title padding-lr-lg padding-top-lg">
            <view class="animals-avatar  margin-right-lg">
              <image v-show="!isFinishImg" mode="aspectFit" src="/static/home-selected.png"
                     style="width: 100%;height: 100%;border-radius: 20rpx;background: linear-gradient(to bottom,#FFFFFF,#f1f1f1)">
              </image>
              <image v-show="isFinishImg" :src="animalDetail?.animalList[0].imgURL" class="scale-up-center"
                     mode="aspectFill"
                     style="width: 100%;height: 100%;border-radius: 20rpx" @load="isFinishImg = true"
                     @tap="onPreviewImage(<string>animalDetail?.animalList[0].imgURL)"></image>
            </view>
            <view class="animals-r text-xl padding-lr-sm" style="flex-grow: 1">
              <view class="text-black flex align-end" style="font-weight:bold">{{ animalDetail?.animalList[0].name }}
                <view class="text-gray margin-left-sm flex align-end" style="font-weight: normal">
                  <uni-icons size="15" type="eye" :color="'#969696FF'"></uni-icons>
                  <text style="margin-left: 3px" class="text-sm">{{ animalDetail?.animalList[0].searchCount }}</text>
                </view>
              </view>
              <view class="flex justify-start align-center ">
                <uni-rate :value="score" allow-half color="#c7c7c7" readonly/>
                <text class="text-lg text-awGreen margin-left-sm">{{ (score * 2).toFixed(1) }}</text>
              </view>
              <text v-if="showRateCount>0" class="text-gray" style="font-size: 10px">共{{ showRateCount }}人评分</text>
              <view class="flex" style="align-self: flex-end;gap: 5px">
                <uni-fav :checked="animalDetail?.animalList[0].collected !== 0" :circle="true" bg-color="#aaa"
                         bg-color-checked="#39c5bb" class="favBtn" fg-color="#ffffff" fg-color-checked="#ffffff"
                         @click="onClickFav"/>
                <text class="cuIcon-edit line-awGreen flex align-center justify-center"
                      style="gap: 2px; width: 60px;font-size: 13px;padding: 0;height: 24px;border-radius: 12px;border: 1px solid #39c5bb"
                      @click="handleRating">评分
                </text>
              </view>
            </view>
          </view>

        </view>
        <!--      介绍区  -->
        <scroll-view :scroll-y="true" style="height: 100%;padding-bottom: 300rpx"
                     @scroll="onScroll">
          <view class="detail-swiper-item">
            <!--   第二部分面板 -->
            <view class="panel-main desc">
              <uni-section style="border-radius: 20rpx 20rpx 0 0" title="类别">
                <template v-slot:decoration>
                  <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                </template>
                <template v-slot:default>
                  <view style="display: flex;flex-wrap: wrap;">
                    <text class="text-gray margin-sm animals-text">
                      {{ animalDetail?.animalList[0].classification }}
                    </text>
                  </view>
                </template>
              </uni-section>
              <uni-section title="保护级别">
                <template v-slot:decoration>
                  <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                </template>
                <template v-slot:default>
                  <view style="display: flex;flex-wrap: wrap;">
                    <text class="text-gray margin-sm animals-text">
                      {{
                        animalDetail?.animalList[0].protectionLevel ?
                            showLevel(animalDetail?.animalList[0].protectionLevel) :
                            '可爱的动物'
                      }}
                    </text>
                  </view>
                </template>
              </uni-section>
              <uni-section title="栖息地">
                <template v-slot:decoration>
                  <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 35rpx"></view>
                </template>
                <template v-slot:default>
                  <view style="display: flex;flex-wrap: wrap;">
                    <text class="text-gray margin-sm animals-text">
                      {{ animalDetail?.animalList[0].distribution || '数据暂无' }}
                    </text>
                  </view>
                </template>
              </uni-section>
              <view v-show="animalDetail?.animalList[0].predator">
                <uni-section title="天敌">
                  <template v-slot:decoration>
                    <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                  </template>
                  <template v-slot:default>
                    <view style="display: flex;flex-wrap: wrap;">
                      <text class="text-gray margin-sm animals-text">{{ animalDetail?.animalList[0].predator }}
                      </text>
                    </view>
                  </template>
                </uni-section>
              </view>
              <view v-show="animalDetail?.animalList[0].breeding">
                <uni-section title="繁殖">
                  <template v-slot:decoration>
                    <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                  </template>
                  <template v-slot:default>
                    <view style="display: flex;flex-wrap: wrap;">
                      <text class="text-gray margin-sm animals-text">{{
                          showBreed(animalDetail?.animalList[0].breeding!)
                        }}
                      </text>
                    </view>
                  </template>
                </uni-section>
              </view>
              <view v-show="animalDetail?.animalList[0].diet">
                <uni-section title="饮食">
                  <template v-slot:decoration>
                    <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                  </template>
                  <template v-slot:default>
                    <view style="display: flex;flex-wrap: wrap;">
                      <text class="text-gray margin-sm animals-text">{{ animalDetail?.animalList[0].diet }}
                      </text>
                    </view>
                  </template>
                </uni-section>
              </view>
              <view v-show="animalDetail?.animalList[0].lifestyle">
                <uni-section title="生活习性">
                  <template v-slot:decoration>
                    <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                  </template>
                  <template v-slot:default>
                    <view style="display: flex;flex-wrap: wrap;">
                      <text class="text-gray margin-sm animals-text">{{ animalDetail?.animalList[0].lifestyle }}
                      </text>
                    </view>
                  </template>
                </uni-section>
              </view>

              <uni-section title="详情">
                <template v-slot:decoration>
                  <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                </template>
                <template v-slot:default>
                  <view style="display: flex;flex-wrap: wrap;">
                    <text class="text-gray margin-sm animals-text">{{ animalDetail?.animalList[0].description }}
                    </text>
                  </view>
                </template>
              </uni-section>
              <uni-section style="border-radius: 0 0 20rpx 20rpx" title="资料来源">
                <template v-slot:decoration>
                  <view class="round bg-gradual-awGreen margin-right-sm" style="width: 8rpx;height: 30rpx"></view>
                </template>
                <template v-slot:default>
                  <view class="flex justify-start align-center margin-sm margin-left-xl padding-bottom-lg text-awGreen"
                        style="font-size: 14px ;text-decoration-line: underline" @tap="goOrigin">
                    百度百科链接
                    <view>
                      <uv-icon color="#39c5bb" name="share-square" size="14"></uv-icon>
                    </view>
                  </view>
                </template>
              </uni-section>
            </view>
            <!--      第三部分猜你喜欢  -->
            <aw-animals-list :animals-list="guessLikeList" :show-name="true" :top="30" @imgError="onImgError">
              <template v-slot:title>
                <view class="guess-like-title flex justify-center align-center">
                  <image mode="aspectFit" src="/static/guess-like.png"></image>
                  猜你喜欢
                  <image mode="aspectFit" src="/static/guess-like.png"></image>
                </view>
              </template>
            </aw-animals-list>
          </view>
        </scroll-view>


      </swiper-item>
      <swiper-item style="height: 100%">
        <scroll-view :scroll-y="true" :style="{paddingTop:isDown?'20px':''}"
                     style="height: 100%;padding-bottom: 120rpx"
                     @scrolltolower="loadMoreComment">
          <!--      评论区  -->
          <view class="detail-swiper-item comment">
            <view v-show="isLoadComment">
              <Comment ref="comment" :animal-id="animalId" :animals="animalDetail?.animalList[0]!" @share="handleShare"
                       @update="updateComment"/>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>

  <uni-popup ref="ratingPopup" type="dialog">
    <uni-popup-dialog :before-close="true" :duration="2000" :title="userStore.userInfoData ? '可滑动评分' : ''"
                      message="成功消息"
                      type="info" @close="closeRating" @confirm="confirmRating">
      <template #default>
        <view v-if="userStore.userInfoData" class="flex align-center">
          <uni-rate v-model="rateValue" :max="5" allow-half @change="onRatingChange"/>
          <text style="color: #39c5bb;margin-left: 5px">{{ rateValue }}分</text>
        </view>
        <view v-else>
          <text class="text-white cu-btn bg-gradual-awGreen lg round" @click="goLogin">请先登录</text>
        </view>
      </template>
    </uni-popup-dialog>
  </uni-popup>

  <mosowe-canvas-image
      ref="imageRef"
      :height="400"
      :imgType="'png'"
      :lists="poster"
      :width="310" showLoading
      @canvasImage="_canvasImage">
  </mosowe-canvas-image>
  <mosowe-canvas-image
      ref="commentRef"
      :height="400"
      :imgType="'png'"
      :lists="commentPoster"
      :width="310"
      showLoading
      @canvasImage="_canvasImage">
  </mosowe-canvas-image>
  <uv-overlay :opacity="0.6" :show="showMask">
    <view v-if="imageData" class="flex flex-column justify-center align-center"
          style="gap: 20px; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)">
      <image :src="imageData" class="bg-white" mode="aspectFit" style="
           border-radius: 10px; width: 310px;height: 400px"></image>
      <!-- #ifndef H5 -->
      <button class="cu-btn round bg-gradual-awGreen padding-tb-lg flex justify-center align-center"
              style="width: 200px;font-size: 15px;gap: 5px" @tap="downloadPic">保存到本地
        <text class="cuIcon-down " style="font-size: 20px"></text>
      </button>
      <button class="cu-btn round bg-gradual-pinknew  padding-tb-lg flex justify-center align-center"
              style="width: 200px;font-size: 15px;gap: 5px" @tap="onShare">分享到其他
        <text class="cuIcon-forward" style="font-size: 20px"></text>
      </button>
      <!--      <view class="app-list flex justify-center align-center" style="width: 100%;gap: 30px;">
              <uv-icon :color="'#4BA2E7'" label="QQ" label-color="#f4f4f4" label-pos="bottom" label-size="12"
                       name="qq-circle-fill" size="45"
                       @click="onShare"></uv-icon>
            </view>-->
      <!-- #endif -->
      <button class="cu-btn round cuIcon-close text-white margin-top-lg"
              style="width: 45px;height:45px;font-size: 24px;background-color: rgba(255,255,255,0.4)"
              @tap="showMask = false">
      </button>
    </view>
  </uv-overlay>
  <uni-popup ref="popupToLogin" type="dialog">
    <uni-popup-dialog confirm-text="前往登录" content="是否前往登录？" title="提示" type="info"
                      @confirm="gotoLogin"></uni-popup-dialog>
  </uni-popup>
</template>

<style lang="scss" scoped>
.shareIcon {
  /* #ifdef H5 */
  top: 3%;
  /* #endif */
  /* #ifndef H5 */
  top: 5%;
  /* #endif */
}

.detail-header {
  position: fixed;
  height: 20vh;
  top: 0;
  left: 0;
  width: 100%;
}

.detail-swiper {
  height: 100vh;
  width: 100%;
}

.showNav {
  transition: all .25s;
  padding-top: 20vh;
}

.hideNav {
  padding-top: 0;
  transition: all .25s
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;
}

.bg-cover {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  /* 图片在容器中居中上部对齐 */
}

.animals-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  //background: #FFFFFF;
  //border-radius: 20rpx;
  padding-top: 5px;
  padding-bottom: 10rpx;

  .panel-title {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 30rpx;
    background-color: rgba(57, 197, 187, 0);
    backdrop-filter: blur(10px);
  }

  .animals-avatar {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;

  }

  .animals-r {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.panel-main {
  margin: 0 40rpx;

  .animals-text {
    text-indent: 2rem;
    line-height: 1.5;
  }
}

.guess-like-title {
  font-size: 16px;
  color: #333333;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  align-items: center;

  image {
    width: 25px;
    height: 25px;
    margin: 0 10px;
  }
}

.hot-category {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  position: fixed;
  overflow: hidden;
  margin-bottom: 10rpx;
  z-index: 999;
  //backdrop-filter: blur(3px);

  .under-line {
    position: absolute;
    bottom: 5px;
    left: 10%;
    width: 2.5rem;
    height: 6px;
    background: linear-gradient(45deg, rgba(57, 197, 187, 0.9), rgba(235, 249, 248, 0.7));
    transition: all 0.3s ease-in-out;
  }

  &-item {
    position: absolute;
    font-size: 16px;
    color: #f0f0f0;
    bottom: 15px;
    transition: all 0.2s ease-in-out;
    padding: 0 20rpx;
    text-shadow: 5px 0 10px #fff;

    &:nth-child(1) {
      left: 10%;
    }

    &:nth-child(2) {
      left: 30%;
    }
  }

  .active {
    color: #39c5bb;
    transform: scale3d(1.1, 1.1, 1.1);
    transition: all 0.25s ease-in-out;
    font-weight: 500;
    z-index: 99;
    font-size: 19px;
  }
}

.detail-swiper-item {
  width: 100%;
}

.animation {
  transition: all 0.2s ease-in-out;
}

.comment {
  padding-top: 40rpx;
}
</style>
